* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-width: 1234px;
}
a {
  text-decoration: none;
}
div:focus {
  outline: none;
}
.downArrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.333333rem !important;
  width: 0.333333rem;
  height: 0.333333rem;
  line-height: 0.333333rem;
  text-align: center;
  border-radius: 50%;
  border: 2px solid black;
  font-size: 0.24rem;
  color: black;
}
.downArrow div {
  margin: 0 auto;
  width: 300%;
  height: 0.08rem;
  transform: translateX(-33.3%);
  margin-top: -0.06rem;
  font-size: 0.07rem;
  text-align: center;
}
video {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -9;
}
#introduce {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: medium none;
}
#header {
  position: absolute;
  top: 1%;
  width: 100%;
  height: 169px;
  border: medium none;
}
.content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 560px;
  height: 96px;
  top: 36%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
}
.content-line-left {
  position: relative;
  top: -3.84px;
  left: -16px;
  display: inline-block;
  width: 76.8px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.6);
}
.content-line-right {
  position: relative;
  top: -3.84px;
  right: -20px;
  display: inline-block;
  width: 76.8px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.6);
}
.content > p:nth-of-type(1),
.content > p:nth-of-type(2) {
  letter-spacing: 2px;
  font-size: 41px;
  font-weight: 700;
}
.content > p:nth-of-type(3) {
  letter-spacing: 1px;
  font-size: 13.4px;
  width: 254.8px;
  text-align: right;
}
.content > p:nth-of-type(4) {
  letter-spacing: 1px;
  font-size: 13.4px;
  width: 255.8px;
  text-align: left;
}
.section-4 {
  width: 100%;
  height: 214px !important;
}
.circular-up {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 520px;
  height: 520px;
  background-color: #06c35e;
  border-radius: 50%;
  z-index: -1;
}
.circular-up-cover {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background-color: rgba(248, 248, 248, 0.8);
}
.circular-down {
  position: absolute;
  bottom: -160px;
  right: -160px;
  width: 520px;
  height: 520px;
  background-color: #f4606c;
  border-radius: 50%;
  z-index: -1;
}
.circular-down-cover {
  position: absolute;
  bottom: -160px;
  right: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background-color: rgba(248, 248, 248, 0.8);
}
.history-zh {
  position: relative;
  font-size: 51px;
  font-weight: 700;
  width: 192px;
  text-align: center;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}
.history-en {
  position: relative;
  font-size: 28.8px;
  width: 192px;
  text-align: center;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}
.history {
  position: relative;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 1574.2px;
  height: 36%;
}
.history .stone-con {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 638px;
  height: 232.3px;
  border-radius: 34.56px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.stone-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
}
.stone-con .slick-slide {
  border-radius: 34.56px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.stone-wrapper {
  display: inline-block;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 37.2%;
}
.stone-con .slick-active {
  opacity: 1;
}
.stone-a {
  position: relative;
  display: inline-block;
  width: 313px;
  height: 235px;
  background-color: #bf9ef9;
}
.stone-a-big {
  position: absolute;
  top: 56px;
  left: 100px;
  font-size: 32px;
  font-weight: 600;
  color: #f8f8f8;
  letter-spacing: 1px;
}
.stone-a-small {
  position: absolute;
  top: 135px;
  left: 100px;
  font-size: 20px;
  font-weight: 600;
  color: #f8f8f8;
  letter-spacing: 1px;
}
.stone-a-img {
  display: inline-block;
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 63px;
  height: 63px;
  border-radius: 50%;
}
.stone-a-img img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.stone-b {
  position: relative;
  float: right;
  width: 325px;
  height: 235px;
}
.stone-b-desc {
  position: absolute;
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  letter-spacing: 2px;
}
.line-con .slick-track {
  height: 100px !important;
}
.line-con .slick-list {
  height: 100px !important;
}
.line-con {
  position: relative;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  width: 1322px !important;
  height: 100px;
}
#s {
  position: relative;
}
.line-son {
  position: relative;
  width: 175px;
  height: 100px;
}
.line-son .line-top {
  position: absolute;
  top: 15px;
  left: 75.5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-size: 100%;
  z-index: 100;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #bf9ef9;
}
.line-top-active {
  transform: scale(1.75);
}
.line-top-hover-active {
  transform: scale(1.75);
}
.line-top img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: fill;
}
.line-bottom {
  position: absolute;
  top: 26px;
  width: 175px !important;
  height: 2px !important;
  background-color: black;
  z-index: -100;
}
.line-date {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  letter-spacing: 1px;
}
#footer {
  width: 100%;
  height: 214px;
  border: medium none;
}
